<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="author" content="Cassie"/>
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
  <meta name="keywords" content=""/>
  <title>Form</title>
  <link rel="stylesheet" href="./css/index.css"/>
  <!-- link bootstrap -->
  <link rel="stylesheet" href="./css/bootstrap.min.css"/>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"/></script>
  <script src="./js/bootstrap.min.js"></script> 
 </head>
 <body>
     <div class="container">
        <div class="col-md-offset-2 col-md-7">
            <h2>用户注册页面</h2>
            <form  class="form-horizontal" id="myForm" onsubmit="return validate()">
                <div class="form-group">
                    <label for="myName" class="col-md-2 control-label">用户名：</label>
                    <div class="col-md-6">
                        <input type="username" class="form-control" id="myName" name="username">
                    </div>
                </div>
                <div class="form-group">
                    <label for="myPassword" class="col-md-2 control-label">密码：</label>
                    <div class="col-md-6">
                        <input type="password" class="form-control" id="myPassword" name="password">
                    </div>
                </div>
                <div class="form-group" >
                    <label class="col-md-2 control-label">性别：</label>
                    <div class="col-md-10" id="sexy">
                        <div class="radio-inline">
                            <label>
                                <input type="radio"  name="gender" id="myOption1"  data-bv-field="gender" value="0">
                                男
                            </label>
                        </div>
                        <div class="radio-inline">
                            <label>
                                <input type="radio"  name="gender" id="myOption2" data-bv-field="gender" value="1">
                                女
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label">爱好：</label>
                    <div class="col-md-10" id="habbit">
                        <label class="checkbox-inline">
                            <input type="checkbox" id="inlineCheckbox1" value="1" name="languages">听音乐
                        </label>
                        <label class="checkbox-inline">
                            <input type="checkbox" id="inlineCheckbox2" value="2" name="languages">看电影
                        </label>
                        <label class="checkbox-inline">
                            <input type="checkbox" id="inlineCheckbox3" value="3" name="languages">玩游戏
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label">城市：</label>
                    <div class="col-md-3" id="country">
                        <select class="form-control degree" name="country" >
                            <option value="">请选择</option>
                            <option value="0">北京</option>
                            <option value="1">上海</option>
                            <option value="2">广州</option>
                        </select>
                    </div>
                </div>    
                <div class="form-group">
                    <label for="myFile" class="col-md-2 control-label">照片：</label>
                    <div class="col-md-10">
                        <input type="file" id="myFile" name="firstFile">
                    </div>
                </div>
                <div class="form-group">
                    <label for="myFile" class="col-md-2 control-label">个人简介：</label>
                    <div class="col-md-10">
                        <textarea class="form-control" rows="3" name="bio"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <input type="submit" class="btn btn-primary" value="提交">
                    </div>
                </div>
            </form>
        </div>
     </div>
  <script>
    //获取表单
    let form = document.forms[0];
    //获取表单域元素数组
    let el = form.elements;
    //获取单个表单域元素
    let username = el['username']
    let password = el['password']
    let gender = el['gender']
    let languages = el['languages']
    console.log(languages)
    let country = el['country']
    let firstFile = el['firstFile']
    let bio = el['bio']

    // console.log(form);
    // console.log(el);
    // console.log(username);
    //   单条验证
    // 用户名
    username.onblur = function() {
        console.log('失去焦点')
        if( username.value == '' ) {
            alert('用户名不能为空')
            return false;
        }
        if( !/[\u4e00-\u9fa5\w]{4,10}/.test(username.value) ){
            alert('用户名长度为4-10个字符')
            return false;
        }
        if( !/[a-zA-Z0-9]/.test(username.value) ){
            alert('用户名仅限于数字、字母')
            return false;
        }
    }
    // 密码
    password.onfocus = function(){
        break;
    }
    password.onblur = function() {
        console.log('失去焦点')
        if( password.value == '' ) {
            alert('密码不能为空')
            return false;
        }
        if( !/[a-zA-Z0-9]{6,10}/.test(password.value) ){
            alert('密码长度为6-10个字符')
            return false;
        }
        if( !/^[a-zA-Z0-9_\.]+$/.test(password.value) ){
            alert('密码仅限于数字、字母、下划线、点')
            return false;
        }
    }
    firstFile.onblur = function() {
        console.log('失去焦点')
        if( firstFile.value == '' ) {
            alert('请上传文件')
            return false;
        }
    }
    bio.onblur = function() {
        console.log('失去焦点')
        if( bio.value == '' ) {
            alert('请介绍你自己')
            return false;
        }
    }
    //   全部验证
    function validate () {

        // 层层拦截
        if( username.value == '' ) {
            alert('用户名不能为空')
            return false;
        }

        if( password.value == '' ) {
            alert('密码不能为空')
            return false;
        }

        if( !/[a-zA-Z0-9]{6,10}/.test(password.value) ) {
            alert('密码为6-10位')
            return false;
        }
        if( gender.value == '') {
            alert('请选择您的性别')
            return false;
        }
        if(languages.item(0).checked==false&&languages.item(1).checked==false&&languages.item(2).checked==false){
            alert("请选择爱好");
                return false;
        }
        if( country.value == '') {
            alert('请选择您的城市')
            return false;
        }
        if( firstFile.value == '') {
            alert('请选择上传文件')
            return false;
        }
        if( bio.value == '') {
            alert('请进行自我简介')
            return false;
        }
        if( !/[\u4e00-\u9fa5\w]{20,}/.test(bio.value) ){
            alert('自我简介不少于20个字')
            return false;
        }
        return true;
    }
  </script>
   
</body>
 </html>